<!-- 状态流程#组件 -->
<template>
    <div class="process-pannel ct-panl">
        <section class="process flex">
            <div
                v-for="(item, index) in info"
                :key="index"
                class="step flex "
                :class="{'active' : index <= statusIndex}">
                {{(index + 1) + '.' + item}}
                <span v-if="index !== info.length-1" style="z-index: 2;">
                    <i class="icon icon-process-blue" v-if="index <= statusIndex"></i>
                    <i class="icon icon-process-gray" v-else></i>
                </span>
            </div>
        </section>
    </div>
</template>

<script lang="ts">
import {Vue, Prop, Component} from 'nuxt-property-decorator'
@Component({
    name: 'processState'
})
export default class ProcessState extends Vue {
    @Prop({
        default: 0
    }) statusIndex!: number
    info: any = ['提交需求', '专家接单', '金额支付 ', '成果交付', '确认收货']
}
</script>

<style scoped lang="scss">
    .process-pannel {
        .process {
            width: 100%;
            height: 45px;
            line-height: 45px;
            background-color: #e8e8e8;
            .step {
                position: relative;
                flex: 1;
                flex-flow: row;
                text-align: center;
                justify-content: center;
                .icon {
                    position: absolute;
                    right: -32px;
                }
            }

            .active {
                position: relative;
                background-color: #11a9e8;
                color: #fff;
            }
        }
    }
</style>
